<template>
  <div class="container">
    <ul>
      <li v-for="item in users" :key="item.id">
        {{ item.id }} == {{ item.name }}
      </li>
    </ul>
    <br />
    <div @click="addUser" class="btn" :style="{ color }">{{ btn }}</div>
  </div>
</template>

<script>
export default {
  // props接受父组件值，数组方式  不能进行类型检查和默认设置  只读(可能存在程序异常)
  // props: ["btn", "color"],
  // 对象方式，可以设置默认值和类型定义
  props: {
    btn: {
      // String Number Boolean Object Null Array
      type: String,
      // 默认值设置，可以是字符串
      default: "默认按钮",
    },
    color: {
      type: String,
      // 默认值设置也可以是回调函数
      default: () => {
        return "red";
      },
    },
    users: {
      type: Array,
      default: [],
    },
  },
  mounted() {
    console.log(typeof this.btn);
  },
  methods: {
    addUser() {
      const userData = { id: Date.now(), name: "姓名===" + Date.now() };
      // 通过自定义事件完成通信
      // 参数1 自定义事件名称，可以任意去起名称
      // 参数2 可选 事件传递的数据，在实现对应事件的时候通过方法参数完成接受
      this.$emit("addUser", userData);
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  .btn {
    width: 200px;
    height: 50px;
    line-height: 50px;
    background: #ccc;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
  }
}
</style>